<template>
    <page-view class="flex flex-col">
        <title-bar :show-back="true">登录</title-bar>
        <div class="flex-1 overflow-auto bg-gray-100">
            <Form class="mt-5" ref="loginFormEl">
                <CellGroup inset>
                    <Field v-model="loginUser.zh" label="用户名" placeholder="请输入用户名"
                        :rules="[{ pattern: /\d{11}/, message: '用户名是一个手机号', trigger: 'onBlur' }]" />
                    <Field v-model="loginUser.password" type="password" label="密码" placeholder="请输入密码"
                        :rules="[{ required: true, message: '密码不能为空', trigger: 'onBlur' }]" />
                    <div class="p-5">
                        <Button :disabled="isSubmiting" :loading="isSubmiting" loading-text="正在登录"
                            loading-type="spinner" @click="checkLogin" type="primary" round block
                            size="small">登录</Button>
                    </div>
                    <div class="text-[12px] text-center py-5">
                        还没有账号，去<router-link class="text-primaryColor" :to="{ name: 'Register' }">注册</router-link>
                    </div>
                </CellGroup>
            </Form>
        </div>
    </page-view>
</template>

<script>
import { Form, Field, CellGroup, Button, Toast } from "vant";
import { mapActions } from "vuex"
import API from "@/utils/API";
export default {
    name: "Login",
    data() {
        return {
            loginUser: {
                zh: "",
                password: "",
            },
            isSubmiting: false
        }
    },
    methods: {
        ...mapActions(["setLoginUserInfo", "setToken"]),
        checkLogin() {
            //第一步：先验证表单
            this.$refs.loginFormEl
                .validate()
                .then(() => {
                    // console.log("验证通过");
                    Toast.success("验证通过");
                    //在讲登录请求之前，我们要讲一个vuex的全局状态管理，这个东西先等注册完成
                    this.submitLoginForm();
                })
                .catch(() => {
                    // console.log("验证没有通过");
                    Toast.fail("验证失败");
                });
        },
        async submitLoginForm() {
            this.isSubmiting = true;
            try {
                let result = await API.userInfo.checkLogin(this.loginUser);
                Toast.success("登录成功");
                // console.log(result);
                // this.$store.dispath("setLoginUserInfo",result.loginUserInfo)  旧的写法
                this.setLoginUserInfo(result.loginUserInfo);
                this.setToken(result.token);
                this.$router.back();
            } catch (error) {
                Toast.fail("登陆失败");
            }
            finally {
                this.isSubmiting = false;
            }
        }

    },
    components: {
        Form, Field, CellGroup, Button
    }
}
</script>

<style lang="scss" scoped>

</style>